<template>
<!-- 搜索 -->
  <div class="search">
    <div class="icon">
      <img src="../assets/images/search.png" alt="">
      <input type="search" v-model="value" placeholder="搜索歌曲、歌手、专辑" ref="search" @input="show = false"/>
    </div>
    <ul v-if="show">
      <Loading v-if="!searchList.length"/>
      <HomeNewMusic 
        v-for="item in searchList"
        :key="item.id"
        :item="item"
        @click.native="clickMusic(item)"
      />
    </ul>
    <div v-else>
      <ul v-if="search.length" class="list">
        <li>搜索"{{value}}"</li>
        <SearchItem v-for="(item,index) in search" :key="index" :item="item" @click.native="clickHandler"/>
      </ul>
      <ul class="hot" v-else>
        <p>热门搜索</p>
        <li v-for="(item,index) in hot" :key="index" @click="clickHandler">{{item.first}}</li>
      </ul>
    </div>
    <PlayControl 
      v-if="PlayControl"
        :playing.sync="playing"
        :gedan="gedan"
        :currentPlaySong.sync="currentPlaySong"
      />
    <ul class="historySearchList" v-if="searchList.length">
      <li v-for="(item,index) in historySearchList" :key="index">
        <img src="../assets/images/history.png" alt="" class="history">
        <div>
          <p @click="clickHandler">
            <span>{{item}}</span>
            <img src="../assets/images/delete.png" @click.stop="deleteHistoryItem(item)">
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
// https://apis.netstart.cn/music/cloudsearch?keywords=%E9%87%91%E7%8E%89%E8%89%AF%E7%BC%98
import _ from 'underscore'
import SearchItem from '@/components/SearchItem.vue'
import HomeNewMusic from '@/components/HomeNewMusic.vue'
import PlayControl from '@/views/PlayControl.vue'
import Loading from '@/views/Loading.vue'

export default {
  components:{
    SearchItem,
    HomeNewMusic,
    PlayControl,
    Loading
  },
  props:["playing","currentPlsysong","gedan"],
  data: function(){
    return{
      hot: [],
      search: [],
      value: '',
      listValue: '',
      searchList: [],
      show: false,
      PlayControl: false,
      historySearchList: [],
    }
  },
  mounted:function(){
    this.$refs.search.focus();
  },
  methods:{
    clickHandler: function(e){
      this.listValue = e.target.innerText;
      this.value = e.target.innerText;
      this.show = true;
      this.$nextTick(() => {
                this.$refs.search.focus();
              });
      if( !this.historySearchList.includes(e.target.innerText) ){
        this.historySearchList.unshift(e.target.innerText);
      }
    },
    clickMusic: function(item){
      this.$emit('update:currentPlaySong',item);
      this.$emit('updateGedan',item);
      this.$nextTick(() => {
      this.$refs.search.focus();
            });
    },
    deleteHistoryItem: function(item){
      var index = this.historySearchList.indexOf(item);
      this.historySearchList.splice(index,1);
    },
  },
  created: function(){
    this.axios
      .get('https://apis.netstart.cn/music/search/hot')
      .then(res => {
        this.hot = res.data.result.hots;
      });
    
  },
  watch: {
      // 加入节流
      value: _.debounce(function (newValue) {
          //2 当删空内容时就不要发送请求
          if (newValue == '') {
              this.search = [];
              return;
          }
          this.axios({
            method: "get",
            url:"https://apis.netstart.cn/music/search/suggest",
            params: {
              code: "utf-8",
              type: "mobile",
              keywords: newValue,
            },
          }).then((res) => {
            if(res.data.code == 200){
              this.search =  res.data.result.allMatch;
              if(!this.search){
                this.search = [];
              }
            }
            
          })
        }, 500),
      listValue: function(n){
        this.axios({
            method: "get",
            url:"https://apis.netstart.cn/music/cloudsearch",
            params: {
              code: "utf-8",
              keywords: n,
            },
          }).then((res) => {
            if(res.data.code == 200){
              this.searchList = res.data.result.songs;
            }
          })
      }
    },
    
}

</script>

<style lang="less" scoped>
ul{
  padding: 0 10px;
}

.search{
  .icon{
    position: relative;
    border-bottom: 1px solid #e2e0e0;
    padding: 0 10px;
    img{
      position: absolute;
      left: 18px;
      top: 8px;
      width: 1em;
    }
    input{
      text-indent: 2em;
      border-radius: 25px;
      outline: none;
      border: 0;
      background-color: #ebecec;
      height: 30px;
      width: 100%;
      margin-bottom: 20px;
    }
  }
  p{
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    padding-left: 10px;
  }
  .hot{
    li{
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 25px;
      display: inline-block;
      height: 32px;
      margin-right: 8px;
      margin-bottom: 8px;
      padding: 0 14px;
      font-size: 14px;
      line-height: 32px;
      color: #333;
    }
  }
  .list{
    li{
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ccc;
      font-size: 15px;
      &:first-child{
        color: #4c81cc;
      }
    }
  }
  .historySearchList{
    li{
      display: flex;
      align-items: center;
      .history{
        width: 15px;
        height: 15px;
      }
      div{
        margin-left: 10px;
        flex: 1;
        p{
          padding-left: 0px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 40px;
          line-height: 40px;
          border-bottom: 1px solid #ccc;
          font-size: 15px;
          img{
            width: 15px;
            margin-right: 1em;
          }
        }
      }
    }
  }
}
</style>